import { Component, } from 'react'
import { Card, Form, Input, Checkbox, Button, message } from 'antd'
import login from 'assets/login.png'
import { login as reqLogin } from '../../api/user'
import './index.scss'
class Login extends Component {
	onFinish = async (values) => {
		// console.log(valus);
		const { mobile, code } = values
		try {
			const res = await reqLogin(mobile, code)
			console.log(res);
			// 存储token
			localStorage.setItem('itcast_geek_pc', res.data.token)
			// 页面跳转
			this.props.history.push('/home')
			// alert('登陆成功')
			message.success('登录成功')
		} catch (err) {
			alert(err.response.data.message)
		}
	}
	render() {
		return <div className='login'>
			<Card className="login-container">
				<img src={login} className="login-logo" alt="" />
				{/* 表单 */}
				<Form name="basic" size='large' onFinish={this.onFinish} initialValues={{
					agree: true,
					mobile: '13811111111',
					code: '246810'
				}}>
					<Form.Item name="mobile" rules={[
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '手机格式不对'
						}, {
							required: true, message: '请输入正确手机号'
						}
					]
					}>
						<Input placeholder="请输入手机号" />
					</Form.Item>

					<Form.Item name="code" rules={[{
						pattern: /^\d{6}/,
						message: '验证码格式不对'
					}, {
						required: true,
						message: '请输入正确验证码'
					}
					]}>
						<Input placeholder="请输入验证码" />
					</Form.Item>

					<Form.Item name="agree" valuePropName="checked" rules={[{ required: true, message: '请阅读协议' }]}>
						<Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
					</Form.Item>

					<Form.Item>
						<Button type="primary" htmlType="submit" block>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Card>

		</div >
	}
}
export default Login